<html lang="zh" xmlns:th="http://www.thymeleaf.org">
	<head>
		<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
		<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="" style="margin-top: 3%;">
			<!-- 试卷信息 -->
			<div>
				<div align="center">
					<b style="font-size: 30px;" th:href="@{'info/' + ${paper.id}}" th:text="${paper.name}"></b>
					(<span th:text="${paper.createTime}"></span>)
				</div>
		        <div class="layui-col-xs5 layui-col-xs-offset7" style="font-size: 20px;margin-top: 2%;">
		        	<span>-----试卷分数：</span>
		        	<span th:text="${paper.grade}"></span>
		        </div>
		        <div class="layui-col-xs11 layui-col-xs-offset1" style="font-size: 20px;margin-bottom: 2%;">
		        	<span>答题人：</span>
		        	<span><a th:text="${answer.studentName}" href="javascript:;" th:onclick="student([[${answer.studentUsername}]])"></a></span>
		        </div>
			</div>
			<!-- 试卷题目 -->
			<div class="layui-form">
				<!-- 单项选择题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>1. 单项选择题</h1>
					<div th:each="oneChoice, status : ${paper.oneChoices}" style="margin: 1%;">
						<div class="layui-col-xs12">
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${oneChoice.question}"></span>
							(<span th:text="${oneChoice.score}"></span>分)
							<input type="checkbox" name="o" th:value="${oneChoice.score}" lay-skin="switch" lay-text="正确|错误">
						</div>
						<div class="layui-col-xs6">
							<div><span>A.&nbsp;</span><span th:text="${oneChoice.aa}"></span></div>
							<div><span>B.&nbsp;</span><span th:text="${oneChoice.ab}"></span></div>
							<div><span>C.&nbsp;</span><span th:text="${oneChoice.ac}"></span></div>
							<div><span>D.&nbsp;</span><span th:text="${oneChoice.ad}"></span></div>
							<div>
								<span style="color: red;">参考答案：</span>
								<span style="color: red;" th:text="${oneChoice.answer}"></span>
								<span>实际答案</span>
								<span th:text="${answer.content['o_' + oneChoice.id]}"></span>
							</div>
						</div>
						<div class="layui-col-xs6">
							<div th:if="${oneChoice.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/oneChioce/' + ${oneChoice.id} + '.jpg'}"></div>
						</div>
					</div>
				</div>
				<!-- 多项选择题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>2. 多项选择题</h1>
					<div th:each="multipleChoice, status : ${paper.multipleChoices}" style="margin: 1%;">
						<div class="layui-col-xs12">
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${multipleChoice.question}"></span>
							(<span th:text="${multipleChoice.score}"></span>分)
							<input type="checkbox" name="m" th:value="${multipleChoice.score}" lay-skin="switch" lay-text="正确|错误">
						</div>
						<div class="layui-col-xs6">
							<div><span>A.&nbsp;</span><span th:text="${multipleChoice.aa}"></span></div>
							<div><span>B.&nbsp;</span><span th:text="${multipleChoice.ab}"></span></div>
							<div><span>C.&nbsp;</span><span th:text="${multipleChoice.ac}"></span></div>
							<div><span>D.&nbsp;</span><span th:text="${multipleChoice.ad}"></span></div>
							<div>
								<span style="color: red;">参考答案：</span>
								<span style="color: red;" th:text="${multipleChoice.answer}"></span>
								<span>实际答案</span>
								<span th:each="ma,status : ${answer.content['m_' + multipleChoice.id]}">
									<span th:text="${ma}"></span>
									<span th:if="${status.count < answer.content['m_' + multipleChoice.id].size()}">,</span>
								</span>
							</div>
						</div>
						<div class="layui-col-xs6">
							<div th:if="${multipleChoice.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/multipleChoice/' + ${multipleChoice.id} + '.jpg'}"></div>
						</div>
					</div>
				</div>
				<!-- 判断题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>3. 判断题</h1>
					<div th:each="judgment, status : ${paper.judgments}" style="margin: 1%;">
						<div>
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${judgment.question}"></span>(&nbsp;&nbsp;)
							(<span th:text="${judgment.score}"></span>分)
							<input type="checkbox" name="j" th:value="${judgment.score}" lay-skin="switch" lay-text="正确|错误">
						</div>
						<span style="color: red;" th:switch="${judgment.answer}">
							<span>正确答案：</span>
							<span th:case="true">正确</span>
							<span th:case="fasle">错误</span>
						</span>
						<span th:switch="${answer.content['j_' + judgment.id]}">
							<span>实际答案</span>
							<span th:case="1">正确</span>
							<span th:case="0">错误</span>
						</span>
					</div>
				</div>
				<!-- 填空题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>4. 填空题</h1>
					<div th:each="fullInTheBlank, status : ${paper.fullInTheBlanks}" style="margin: 1%;">
						<div class="layui-col-xs12">
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${fullInTheBlank.question}"></span>
							(<span th:text="${fullInTheBlank.score}"></span>分)
							<input type="checkbox" name="f" th:value="${fullInTheBlank.score}" lay-skin="switch" lay-text="正确|错误">
						</div>
						<div class="layui-col-xs6">
							<span style="color: red;">参考答案：</span>
							<span style="color: red;" th:text="${fullInTheBlank.answer}"></span>
							<span>实际答案</span>
							<span th:text="${answer.content['f_' + fullInTheBlank.id]}"></span>
						</div>
						<div class="layui-col-xs6">
							<div th:if="${fullInTheBlank.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/fullInTheBlank/' + ${fullInTheBlank.id} + '.jpg'}"></div>
						</div>
					</div>
				</div>
				<!-- 简答题 -->
				<div class="layui-col-md11 layui-col-md-offset1">
					<h1>5. 简答题</h1>
					<div th:each="discussion, status : ${paper.discussions}" style="margin: 1%;">
						<div class="layui-col-xs12">
							<span th:text="${status.count} + '.&nbsp;'"></span>
							<span th:text="${discussion.question}"></span>
							(<span th:text="${discussion.score}"></span>分)
							<input type="checkbox" name="d" th:value="${discussion.score}" lay-skin="switch" lay-text="正确|错误">
						</div>
						<div class="layui-col-xs12" style="height: 100px;margin-top: 1%;">
							<div class="layui-col-xs6">
								<span th:text="${answer.content['d_' + discussion.id]}"></span>
							</div>
							<div class="layui-col-xs6">
								<div th:if="${discussion.isImage}"><img height="100px" width="100px" alt="图" th:src="@{'http://192.168.0.105/image/TestSystem/paper/discussion/' + ${discussion.id} + '.jpg'}"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 统计分数 -->
			<div class="layui-col-xs5 layui-col-xs-offset1">
				<h1>分数统计</h1>
				<div class="layui-form layui-form-pane" style="margin-top: 2%;">
					<div class="layui-form-item">
						<label class="layui-form-label">单项选择题</label>
						<div class="layui-input-block">
							<input disabled="disabled" id="oneChoice" type="text" class="layui-input" value="0">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">多项选择题</label>
						<div class="layui-input-block">
							<input disabled="disabled" id="multipleChoice" type="text" class="layui-input" value="0">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">判断题</label>
						<div class="layui-input-block">
							<input disabled="disabled" id="judgment" type="text" class="layui-input" value="0">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">填空题</label>
						<div class="layui-input-block">
							<input disabled="disabled" id="fullInTheBlank" type="text" class="layui-input" value="0">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">简答题</label>
						<div class="layui-input-block">
							<input disabled="disabled" id="discussion" type="text" class="layui-input" value="0">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">总分</label>
						<div class="layui-input-block">
							<input disabled="disabled" id="grade" type="text" class="layui-input" value="0">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class='layui-btn' onclick="subGrade()">提交</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function student(username){
			layui.use('layer', function(){
				var layer = layui.layer;
				var info = layer.open({
				      type: 2,
				      title: '学生信息',
				      shadeClose: true,
				      shade: false,
				      offset: 't', 
				      btn: ['关闭'],
				      yes: function(index){
				    	  layer.close(index)
				      },
				      maxmin: true, //开启最大化最小化按钮
				      area: ['600px', '400px'],
				      content: '../student/info?username='+username
				}); 
			})
		}
		layui.use(['layer', 'form'], function(){
			var layer = layui.layer;
			var form = layui.form;
			var ov = 0;
			var mv = 0;
			var jv = 0;
			var fv = 0;
			var dv = 0;
			form.on('switch', function(data){
				var name = data.elem.getAttribute('name');
				var status = data.elem.checked;
				var value = data.value;
				value = parseInt(value);
				console.log(name+","+status+","+value)
				switch(name){
				case 'o':
					if(status){
						ov = ov + value;
					}else{
						ov = ov - value;
					}
					$("#oneChoice").val(ov);
					break;
				case 'm':
					if(status){
						mv = mv + value;
					}else{
						mv = mv - value;
					}
					$("#multipleChoice").val(mv);
					break;
				case 'j':
					if(status){
						jv = jv + value;
					}else{
						jv = jv - value;
					}
					$("#judgment").val(jv);
					break;
				case 'f':
					if(status){
						fv = fv + value;
					}else{
						fv = fv - value;
					}
					$("#fullInTheBlank").val(fv);
					break;
				case 'd':
					if(status){
						dv = dv + value;
					}else{
						dv = dv - value;
					}
					$("#discussion").val(dv);
					break;
				}
				console.log(ov+mv+jv+fv+dv)
				$('#grade').val(ov+mv+jv+fv+dv);
			}); 
		})
		function subGrade(){
			var grade = $("#grade").val();
			$.post('../grade/subGrade', {
				answerId: [[${answer.id}]],
				grade: grade
			}, function(res){
				layui.use('layer', function(){
					var layer = layui.layer;
					if(res.code == '00000'){
						layer.alert('提交成功', {offset: 't'}, function(){
							window.history.back();
						})
					}else{
						layer.alert(res.message);
					}
				})
			}, 'json')
		}
	</script>
</html>